<!-- Page Header -->
<%
  var headerClass = 'site-header';
  var headerStyle = '';
  var pageTitleClass = 'page-title';
  var pageTitle = '';
  var pageSubtitle = '';
  var siteMenuClass = 'site-menu';

  if (config.use_header_cover) {
    headerClass += ' header-background';
    if (config.root === '/') {
      headerStyle = 'background-image: url(' + config.index_cover + ')';
    } else {
      headerStyle = 'background-image: url(' + config.root + config.index_cover + ')';
    }
    pageTitleClass += ' with-background-image';
    siteMenuClass += ' with-background-image';
  }

  if (headerType === 'index') {
    pageTitle = config.title;
    if (config.subtitle) pageSubtitle = config.subtitle;
  } else if (headerType === 'post') {
    if (post.head && post.head.cover) headerStyle = 'background-image: url(' + post.head.cover + ')';
    else
        headerStyle = 'background-image: url(' + config.cover + ')';

    pageTitle = post.head.title || __('untitled_post');
  } else if (headerType === 'archive') {
    pageTitle = __('archive_title');
  }
%>

<header class="<%= headerClass %>" style="<%= headerStyle %>">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="<%= pageTitleClass %>">
          <p class="title"><%= pageTitle %></p>
          <p class="subtitle"><%= pageSubtitle %></p>
        </div>
        <div class="<%= siteMenuClass %>">
          <ul>
            <% for (var i in config.menu){ %>
              <li>
                <a href="<%- config.menu[i].url %>">
                  <% if (config.menu[i].icon) { %>
                  <i class="fa fa-<%= config.menu[i].icon %>"></i>
                  <% } else { %>
                  <%= i %>
                  <% } %>
                  <%= config.menu[i].name %>
                </a>
              </li>
            <% } %>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>
